<template>
  <!--  面包屑导航-->
  <div class="break">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>上岗管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>合同工</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索工具栏-->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="searchFormModel.name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-select v-model="searchFormModel.department" placeholder="请选择部门" clearable style="width: 130px">
          <el-option
              v-for="item in departmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="正式编制" prop="compile">
        <el-select v-model="searchFormModel.compile" placeholder="请选择正式编制" clearable style="width: 150px">
          <el-option
              v-for="item in compileOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="等级" prop="grade">
        <el-select v-model="searchFormModel.grade" placeholder="请选择等级" clearable style="width: 130px">
          <el-option
              v-for="item in gradeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主职务" prop="duties">
        <el-select v-model="searchFormModel.duties" placeholder="请选择主职务" clearable style="width: 140px">
          <el-option
              v-for="item in dutiesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="searchFormModel.sex" placeholder="请选择性别" clearable style="width: 130px">
          <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="婚姻" prop="marriage">
        <el-select v-model="searchFormModel.marriage" placeholder="请选择婚姻状态" clearable style="width: 130px">
          <el-option
              v-for="item in marriageOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文化程度" prop="education">
        <el-select v-model="searchFormModel.education" placeholder="请选择文化程度" clearable style="width: 150px">
          <el-option
              v-for="item in educationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="searchOnSubmit">查询</el-button>
        <el-button style="background-color: pink" @click="dialogAddState=true">添加</el-button>
        <el-upload action="http://localhost:9093/information/import" :on-success="handleImport" style="margin-left: 10px" :show-file-list="false">
          <el-button type="primary" plain>导入</el-button>
        </el-upload>
        <el-button type="info" plain @click="exportpeople" style="margin-left: 10px">导出</el-button>
        <el-button type="success" @click="downloadFile" plain style="margin-left: 10px">下载模板</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="blogInfo" stripe border style="width: 100%"
    >
      <el-table-column prop="number" label="工号" />
      <el-table-column prop="name" label="姓名"  />
      <el-table-column prop="identity" label="身份证号" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="birth" label="生日" />
      <el-table-column prop="grade" label="等级" />
      <el-table-column prop="employee" label="人员分类" />
      <el-table-column prop="compile" label="正式编制" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="jobtitle" label="职称" />
      <el-table-column prop="department" label="部门名称" />
      <el-table-column prop="education" label="主要文化" />
      <el-table-column prop="duties" label="主职务" />
      <el-table-column prop="title" label="头衔" />
      <el-table-column prop="birthplace" label="籍贯" />
      <el-table-column prop="nation" label="民族" />
      <el-table-column prop="party_time" label="入党日期" />
      <el-table-column prop="entry_date" label="入职日期" />
      <el-table-column prop="political_outlook" label="政治面貌" />
      <el-table-column prop="education_type" label="教育类型" />
      <el-table-column prop="marriage" label="婚姻" />
      <el-table-column prop="fulltimedegree" label="全日制学历" />
      <el-table-column prop="fulldegree" label="全日制学位" />
      <el-table-column prop="fulltimeprofession" label="全日制毕业院校专业" />
      <el-table-column prop="phonenumber" label="手机号" />
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button size="small" @click="tableEditHandler(scope.$index, scope.row)">
            <el-icon><Edit /></el-icon>编辑
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="tableDeleteHandler(scope.$index, scope.row)">
            <el-icon><Delete /></el-icon>删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="停/启用" width="160">
        <template #default="scope">
        <el-button
            size="small"
            type="primary"
            :disabled="scope.row.status === 0 || scope.row.status === '已驳回' || scope.row.status === '已通过'"
            @click="tableDelHandler(scope.row.id)">
          <el-icon><Lock /></el-icon>锁定
        </el-button>
          <el-button
              size="small"
              type="primary"
              :disabled="scope.row.status === 1 || scope.row.status === '已驳回' || scope.row.status === '已通过'"
              @click="tableAppHandler(scope.row.id)">
            <el-icon><Unlock /></el-icon>解锁
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,7]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 添加模态框 -->
  <el-dialog v-model="dialogAddState" title="添加人员" width="680">
    <div>
      <el-form ref="formAddRef" :model="formAdd" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="name" label="姓名">
              <el-input v-model="formAdd.name" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="phonenumber" label="手机号">
              <el-input v-model="formAdd.phonenumber" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="identity" label="身份证号">
              <el-input v-model="formAdd.identity" @input="extractBirthDate" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="sex" label="性别">
              <el-radio-group v-model="formAdd.sex">
                <el-radio :label="item.value" v-for="item in sexOptions" :key="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="birth" label="出生年月">
              <el-input v-model="formAdd.birth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="grade" label="等级">
              <el-select v-model="formAdd.grade" placeholder="请选择等级">
                <el-option label="一级" value="一级"></el-option>
                <el-option label="二级" value="二级"></el-option>
                <el-option label="三级" value="三级"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="employee" label="人员分类">
              <el-input v-model="formAdd.employee" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="compile" label="正式编制">
              <el-select v-model="formAdd.compile" placeholder="请选择编制类型">
                <el-option label="行政编制" value="行政编制"></el-option>
                <el-option label="事业编制" value="事业编制"></el-option>
                <el-option label="企业编制" value="企业编制"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="role" label="角色">
              <el-select v-model="formAdd.role" placeholder="请选择角色">
                <el-option label="行政人员" value="行政人员"></el-option>
                <el-option label="后勤人员" value="后勤人员"></el-option>
                <el-option label="财务人员" value="财务人员"></el-option>
                <el-option label="网管维修人员" value="网管维修人员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="jobtitle" label="职称">
              <el-select v-model="formAdd.jobtitle" placeholder="请选择职称">
                <el-option label="科长" value="科长"></el-option>
                <el-option label="局长" value="局长"></el-option>
                <el-option label="科员" value="科员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="department" label="部门名称">
              <el-select v-model="formAdd.department" placeholder="请选择部门名称">
                <el-option label="道路交通管理部门" value="道路交通管理部门"></el-option>
                <el-option label="交通应急管理部门" value="交通应急管理部门"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="education" label="文化程度">
              <el-select v-model="formAdd.education" placeholder="请选择文化程度">
                <el-option label="研究生" value="研究生"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="专科" value="专科"></el-option>
                <el-option label="中专" value="中专"></el-option>
                <el-option label="中技" value="中技"></el-option>
                <el-option label="高中" value="高中"></el-option>
                <el-option label="初中" value="初中"></el-option>
                <el-option label="小学" value="小学"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="duties" label="主职务">
              <el-select v-model="formAdd.duties" placeholder="请选择职务">
                <el-option label="人事" value="人事"></el-option>
                <el-option label="财务" value="财务"></el-option>
                <el-option label="经理" value="经理"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="title" label="头衔">
              <el-select v-model="formAdd.title" placeholder="请选择职务">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="birthplace" label="籍贯">
              <el-cascader
              size="large"
              :options="regionData"
              v-model="formAdd.birthplace"
              @change="handleChange"
              clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="nation" label="民族">
              <el-select v-model="formAdd.nation" placeholder="请选择民族">
                <el-option
                    v-for="item in nationOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="party_time" label="入党日期">
              <el-date-picker
              v-model="formAdd.party_time"
              type="date"
              placeholder="选择日期"
              @change="formatDate"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="entry_date" label="入职日期">
              <el-date-picker
                  v-model="formAdd.entry_date"
                  type="date"
                  placeholder="选择日期"
                  @change="formatDate1"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="political_outlook" label="政治面貌">
              <el-select v-model="formAdd.political_outlook" placeholder="请选择政治面貌">
                <el-option
                    v-for="item in politicalOutlookOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="education_type" label="教育类型">
              <el-input v-model="formAdd.education_type" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="marriage" label="婚姻">
              <el-select v-model="formAdd.marriage" placeholder="请选择婚姻状况">
                <el-option
                    v-for="item in marriageOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fulltimedegree" label="全日制学历">
              <el-input v-model="formAdd.fulltimedegree"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="fulldegree" label="全日制学位">
              <el-select v-model="formAdd.fulldegree" placeholder="请选择全日制学位">
                <el-option
                    v-for="item in fullDegreeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fulltimeprofession" label="全日制毕业院校专业">
              <el-input v-model="formAdd.fulltimeprofession"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary" @click="submitRegisterForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!--  编辑模态框-->
  <el-dialog v-model="dialogEditState" title="修改人员信息" width="700">
    <div>
      <el-form ref="formEdifRef" :model="formEdit"  label-width="120px">
        <el-form-item v-if="false" prop="id" label="序号">
          <el-input v-model="formEdit.id"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="name" label="姓名" >
              <el-input v-model="formEdit.name" maxlength="10" disabled style="background-color: darkgray"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="phonenumber" label="手机号">
              <el-input v-model="formEdit.phonenumber" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="identity" label="身份证号">
              <el-input v-model="formEdit.identity" @input="extractBirthDate" maxlength="18" disabled style="background-color: darkgray"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="sex" label="性别">
              <el-radio-group v-model="formEdit.sex" disabled>
                <el-radio :label="item.value" v-for="item in sexOptions" :key="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="birth" label="出生年月">
              <el-input v-model="formEdit.birth" disabled style="background-color: darkgray"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="grade" label="等级">
              <el-select v-model="formEdit.grade" placeholder="请选择等级">
                <el-option label="一级" value="一级"></el-option>
                <el-option label="二级" value="二级"></el-option>
                <el-option label="三级" value="三级"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="employee" label="人员分类">
              <el-input v-model="formEdit.employee" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="compile" label="正式编制">
              <el-select v-model="formEdit.compile" placeholder="请选择编制类型" disabled style="background-color: darkgray">
                <el-option label="行政编制" value="行政编制"></el-option>
                <el-option label="事业编制" value="事业编制"></el-option>
                <el-option label="企业编制" value="企业编制"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="role" label="角色">
              <el-select v-model="formEdit.role" placeholder="请选择角色" disabled style="background-color: darkgray">
                <el-option label="行政人员" value="行政人员"></el-option>
                <el-option label="后勤人员" value="后勤人员"></el-option>
                <el-option label="财务人员" value="财务人员"></el-option>
                <el-option label="网管维修人员" value="网管维修人员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="jobtitle" label="职称">
              <el-select v-model="formEdit.jobtitle" placeholder="请选择职称">
                <el-option label="科长" value="科长"></el-option>
                <el-option label="局长" value="局长"></el-option>
                <el-option label="科员" value="科员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="department" label="部门名称">
              <el-select v-model="formEdit.department" placeholder="请选择部门名称" disabled style="background-color: darkgray">
                <el-option label="道路交通管理部门" value="道路交通管理部门"></el-option>
                <el-option label="交通应急管理部门" value="交通应急管理部门"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="education" label="文化程度">
              <el-select v-model="formEdit.education" placeholder="请选择文化程度">
                <el-option label="研究生" value="研究生"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="专科" value="专科"></el-option>
                <el-option label="中专" value="中专"></el-option>
                <el-option label="中技" value="中技"></el-option>
                <el-option label="高中" value="高中"></el-option>
                <el-option label="初中" value="初中"></el-option>
                <el-option label="小学" value="小学"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="duties" label="主职务">
              <el-select v-model="formEdit.duties" placeholder="请选择职务">
                <el-option label="人事" value="人事"></el-option>
                <el-option label="财务" value="财务"></el-option>
                <el-option label="经理" value="经理"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="title" label="头衔">
              <el-select v-model="formEdit.title" placeholder="请选择职务" disabled style="background-color: darkgray">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="birthplace" label="籍贯">
              <el-cascader
                  size="large"
                  :options="regionData"
                  v-model="formEdit.birthplace"
                  @change="handleChange"
                  clearable disabled style="background-color: darkgray"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="nation" label="民族">
              <el-select v-model="formEdit.nation" placeholder="请选择民族">
                <el-option
                    v-for="item in nationOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value" disabled style="background-color: darkgray">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="party_time" label="入党日期">
              <el-date-picker
                  v-model="formEdit.party_time"
                  type="date"
                  placeholder="选择日期"
                  @change="formatDate" disabled style="background-color: darkgray"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="entry_date" label="入职日期">
              <el-date-picker
                  v-model="formEdit.entry_date"
                  type="date"
                  placeholder="选择日期"
                  @change="formatDate1" disabled style="background-color: darkgray"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="political_outlook" label="政治面貌">
              <el-select v-model="formEdit.political_outlook" placeholder="请选择政治面貌">
                <el-option
                    v-for="item in politicalOutlookOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value" disabled style="background-color: darkgray">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="education_type" label="教育类型">
              <el-input v-model="formEdit.education_type" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="marriage" label="婚姻">
              <el-select v-model="formEdit.marriage" placeholder="请选择婚姻状况">
                <el-option
                    v-for="item in marriageOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fulltimedegree" label="全日制学校">
              <el-input v-model="formEdit.fulltimedegree"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="fulldegree" label="全日制学位">
              <el-select v-model="formEdit.fulldegree" placeholder="请选择全日制学位">
                <el-option
                    v-for="item in fullDegreeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fulltimeprofession" label="全日制毕业院校专业">
              <el-input v-model="formEdit.fulltimeprofession"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogEditOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {Unlock,Lock,Delete,Edit} from "@element-plus/icons";
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/people";
import {ElMessage, ElMessageBox} from "element-plus";
import {regionData} from "element-china-area-data";


const  mallInfo=ref([])
onMounted(()=>{
  getPeople();
})


// 表格显示内容
const getPeople = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含ID参数
  };
  //模糊查询
  if (searchFormModel.name && searchFormModel.name.trim() !== '') {
    params.name = searchFormModel.name.trim();
  }
  // 如果部门不为空，则添加到查询参数中
  if (searchFormModel.department && searchFormModel.department.trim() !== '') {
    params.department = searchFormModel.department.trim();
  }
  // 如果正式编制不为空，则添加到查询参数中
  if (searchFormModel.compile && searchFormModel.compile.trim() !== '') {
    params.compile = searchFormModel.compile.trim();
  }
  // 如果人员分类不为空，则添加到查询参数中
  if (searchFormModel.employee && searchFormModel.employee.trim() !== '') {
    params.employee = searchFormModel.employee.trim();
  }
  // 如果等级不为空，则添加到查询参数中
  if (searchFormModel.grade && searchFormModel.grade.trim() !== '') {
    params.grade = searchFormModel.grade.trim();
  }
  // 如果主职务不为空，则添加到查询参数中
  if (searchFormModel.duties && searchFormModel.duties.trim() !== '') {
    params.duties = searchFormModel.duties.trim();
  }
  // 如果性别不为空，则添加到查询参数中
  if (searchFormModel.sex && searchFormModel.sex.trim() !== '') {
    params.sex = searchFormModel.sex.trim();
  }
  // 如果婚姻状态不为空，则添加到查询参数中
  if (searchFormModel.marriage && searchFormModel.marriage.trim() !== '') {
    params.marriage = searchFormModel.marriage.trim();
  }
  // 如果文化程度不为空，则添加到查询参数中
  if (searchFormModel.education && searchFormModel.education.trim() !== '') {
    params.education = searchFormModel.education.trim();
  }
  request({
    url: '/information/people',
    method: 'get',
    params,
  }).then((req) => {
    console.log(req)
    if (200 == req.data.errorCode) {
      blogInfo.value = req.data.data.records.map(item => ({
        ...item,
      }));
      totals.value = req.data.data.total;
    }
  })
}

//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const  blogInfo=ref([])
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value=val;
  getPeople()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value=val;
  getPeople()
}
//搜索
const searchFormRef=ref()
const searchFormModel=reactive({
  name:'',
  department:'',
  employee:'',
  grade:'',
  duties:'',
  marriage:'',
  sex:'',
  education:'',
  compile:''
})
const educationOptions = ref([
  { value: '研究生', label: '研究生' },
  { value: '本科', label: '大学本科（简称：本科）' },
  { value: '专科', label: '大学专科' },
  { value: '中专', label: '中等专业学校（简称：中专）' },
  { value: '中技', label: '中等技术学校（简称：中技）' },
  { value: '高中', label: '高中' },
  { value: '初中', label: '初中' },
  { value: '小学', label: '小学' },
  { value: '文盲', label: '文盲' },
  { value: '半文盲', label: '半文盲' }
]);
// 定义婚姻状态的选项
const marriageOptions = ref([
  { value: '已婚', label: '已婚' },
  { value: '未婚', label: '未婚' },
  { value: '离异', label: '离异' },
  { value: '丧偶', label: '丧偶' },
]);
// 定义下拉框选项
const departmentOptions = ref([
  { value: '道路交通管理部门', label: '道路交通管理部门' },
  { value: '交通应急管理部门', label: '交通应急管理部门' },
]);

const compileOptions = ref([
  { value: '行政编制', label: '行政编制' },
  { value: '事业编制', label: '事业编制' },
  { value: '企业编制', label: '企业编制' },
]);

const employeeOptions = ref([
  { value: '外聘工', label: '外聘工' },
  { value: '合同工', label: '合同工' },
]);

const gradeOptions = ref([
  { value: '一级', label: '一级' },
  { value: '二级', label: '二级' },
  { value: '三级', label: '三级' },
]);
const jobTitleOptions = ref([
  { value: '科长', label: '科长' },
  { value: '局长', label: '局长' },
  { value: '科员', label: '科员' }
])
const dutiesOptions = ref([
  { value: '人事', label: '人事' },
  { value: '财务', label: '财务' },
  { value: '经理', label: '经理' },
]);

const sexOptions = ref([
  { value: '男', label: '男' },
  { value: '女', label: '女' },
  // 更多性别选项...
]);
const searchOnSubmit=()=>{
  getPeople()
}
//导出
const exportpeople = () => {
  window.open('http://localhost:9093/information/export')
}
//导入
const handleImport = (res, file, fileList) => {
    ElMessage({
      type: 'success',
      message: '导入成功',
    })
  getPeople()
};
//下载

const filename = ref('Information.xlsx');
const downloadFile = () => {
  // 构建下载URL
  const url = `http://localhost:9093/file/download?filename=${filename.value}`;
  // 创建一个a标签用于下载
  const link = document.createElement('a');
  link.href = url;
  // 设置下载的文件名
  link.setAttribute('download', filename.value);
  // 模拟点击下载
  document.body.appendChild(link);
  link.click();
  // 移除创建的a标签
  document.body.removeChild(link);
};
const searchOnReset=()=>{
  searchFormModel.name=''
}


///////////////////添加/////////////////////////
const dialogAddState = ref(false);
const formAddData = {
  id:'',
  name:'',
  number:'',
  identity:'',
  birth:'',
  compile:'',
  role:'',
  jobtitle:'',
  department:'',
  employee:'合同工',
  grade:'',
  duties:'',
  marriage:'',
  sex:'',
  education:'',
  titles:'',
  birthplace:'',
  nation:'',
  party_time:'',
  entry_date:'',
  political_outlook:'',
  education_type: '全日制',
  fulltimedegree:'',
  fulldegree:'',
  fulltimeprofession:'',
  phonenumber:'',
  status:""
};
const formAdd = reactive({...formAddData});
const addressFormRef = ref(null); // 创建一个ref引用form
// 提取出生年月的方法
function extractBirthDate() {
  if (formAdd.identity.length === 18) {
    const birthYear = formAdd.identity.substring(6, 10);
    const birthMonth = formAdd.identity.substring(10, 12);
    const birthDay = formAdd.identity.substring(12, 14);
    formAdd.birth = `${birthYear}-${birthMonth}-${birthDay}`;
  }
}
// 提交表单
const submitRegisterForm = ()=>{
  request({
    method:'post',
    url:'/information/add',
    params:formAdd
  }).then(req=>{
    ElMessage({
      type:'info',
      message:req.data.msg
    })
    if (200 == req.data.errorCode){
      Object.assign(formAdd,formAddData)
      getPeople()
    }
  })
  dialogAddState.value=false;
}
const dialogAddOnReset = () => {
  Object.assign(formAdd , formAddData)
  dialogAddState.value = false
}
//姓名只能输入汉字//
const validateChineseName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入姓名'));
  }
  // 正则表达式，匹配只包含汉字的字符串
  const regex = /^[\u4e00-\u9fa5]+$/;
  if (!regex.test(value)) {
    return callback(new Error('姓名只能输入汉字'));
  }
  callback();
};
const rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { validator: validateChineseName, trigger: 'blur' }
  ],
  number: [
    { required: true, message: '请输入工号', trigger: 'blur' }
  ],
  identity: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { validator: validateIdentity, trigger: 'blur' }
  ],
  sex: [
    { required: true, message: '请输入性别', trigger: 'blur' }
  ],
  grade: [
    { required: true, message: '请选择等级', trigger: 'change' }
  ],
  employee: [
    { required: true, message: '请选择人员分类', trigger: 'change' }
  ],
  compile: [
    { required: true, message: '请选择编制类型', trigger: 'change' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ],
  jobtitle: [
    { required: true, message: '请选择职称', trigger: 'change' }
  ],
  department: [
    { required: true, message: '请选择部门名称', trigger: 'change' }
  ],
  education: [
    { required: true, message: '请选择文化程度', trigger: 'change' }
  ],
  duties: [
    { required: true, message: '请选择主职务', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请选择头衔', trigger: 'change' }
  ],
  birthplace: [
    { required: true, message: '请输入籍贯', trigger: 'blur' }
  ],
  nation: [
    { required: true, message: '请输入民族', trigger: 'blur' }
  ],
  party_time: [
    { required: true, message: '请输入入党日期', trigger: 'blur' }
  ],
  entry_date: [
    { required: true, message: '请输入入职日期', trigger: 'blur' }
  ],
  political_outlook: [
    { required: true, message: '请输入政治面貌', trigger: 'blur' }
  ],
  education_type: [
    { required: true, message: '请输入教育类型', trigger: 'blur' }
  ],
  fulltimedegree: [
    { required: true, message: '请输入全日制学历', trigger: 'blur' }
  ],
  fulldegree: [
    { required: true, message: '请输入全日制学位', trigger: 'blur' }
  ],
  fulltimeprofession: [
    { required: true, message: '请输入全日制毕业院校专业', trigger: 'blur' }
  ],
  phonenumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: validatePhoneNumber, trigger: 'blur' }
  ],
  marriage: [
    { required: true, message: '请输入婚姻状况', trigger: 'blur' }
  ]
})



// 身份证号格式//
function validateIdentity(rule, value, callback) {
  const idRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\dX]$/
  if (!value) {
    callback(new Error('身份证号码不能为空'))
  } else if (!idRegex.test(value)) {
    callback(new Error('请输入正确的身份证号码格式'))
  } else {
    callback()
  }
}

//手机号格式//
function validatePhoneNumber(rule, value, callback) {
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!value) {
    callback(new Error('手机号不能为空'))
  } else if (!phoneRegex.test(value)) {
    callback(new Error('请输入正确的手机号格式'))
  } else {
    callback()
  }
}
///////////籍贯选择////////
//////////地点设置/////////
//区域码
const hSelectedRegion = ref();
//区域名
const hSelectedRegionLabel = ref('');
//选完省市区后触发的回调函数
// 选完省市区后触发的回调函数
const handleChange = (value) => {
  hSelectedRegion.value = value;
  // 如果 value 不为空，则调用 getRegionLabel 函数获取区域名称字符串
  if (value) {
    formAdd.birthplace = getRegionLabel(value);
  } else {
    formAdd.birthplace = ''; // 如果没有选择任何区域，则清空 formAdd.place
  }
};

// 把区域码转成区域名的方法
const getRegionLabel = (value) => {
  if (!value) return '';
  let label = '';
  let data = regionData;
  for (let i = 0; i < value.length; i++) {
    const item = data.find(item => item.value === value[i]);
    if (item) {
      label += item.label;
      data = item.children;
      if (i < value.length - 1) {
        label += ' / '; // 使用 ' / ' 作为分隔符
      }
    } else {
      break;
    }
  }
  return label;
};

// 定义民族选项数据
const nationOptions = ref([
  { value: '汉族', label: '汉族' },
  { value: '壮族', label: '壮族' },
  { value: '满族', label: '满族' },
  { value: '回族', label: '回族' },
  { value: '苗族', label: '苗族' },
  { value: '维吾尔族', label: '维吾尔族' },
  { value: '彝族', label: '彝族' },
  { value: '土家族', label: '土家族' },
  { value: '藏族', label: '藏族' },
  { value: '蒙古族', label: '蒙古族' },
  { value: '侗族', label: '侗族' },
  { value: '布依族', label: '布依族' },
  { value: '瑶族', label: '瑶族' },
  { value: '朝鲜族', label: '朝鲜族' },
  { value: '白族', label: '白族' },
  { value: '哈尼族', label: '哈尼族' },
  { value: '哈萨克族', label: '哈萨克族' },
  { value: '黎族', label: '黎族' },
  { value: '傣族', label: '傣族' },
  { value: '畲族', label: '畲族' },
  { value: '傈僳族', label: '傈僳族' },
  { value: '仡佬族', label: '仡佬族' },
  { value: '东乡族', label: '东乡族' },
  { value: '高山族', label: '高山族' },
  { value: '拉祜族', label: '拉祜族' },
  { value: '水族', label: '水族' },
  { value: '佤族', label: '佤族' },
  { value: '纳西族', label: '纳西族' },
  { value: '羌族', label: '羌族' },
  { value: '土族', label: '土族' },
  { value: '仫佬族', label: '仫佬族' },
  { value: '锡伯族', label: '锡伯族' },
  { value: '柯尔克孜族', label: '柯尔克孜族' },
  { value: '达斡尔族', label: '达斡尔族' },
  { value: '景颇族', label: '景颇族' },
  { value: '毛南族', label: '毛南族' },
  { value: '撒拉族', label: '撒拉族' },
  { value: '塔吉克族', label: '塔吉克族' },
  { value: '阿昌族', label: '阿昌族' },
  { value: '普米族', label: '普米族' },
  { value: '鄂温克族', label: '鄂温克族' },
  { value: '怒族', label: '怒族' },
  { value: '京族', label: '京族' },
  { value: '基诺族', label: '基诺族' },
  { value: '德昂族', label: '德昂族' },
  { value: '保安族', label: '保安族' },
  { value: '俄罗斯族', label: '俄罗斯族' },
  { value: '裕固族', label: '裕固族' },
  { value: '乌孜别克族', label: '乌孜别克族' },
  { value: '门巴族', label: '门巴族' },
  { value: '鄂伦春族', label: '鄂伦春族' },
  { value: '独龙族', label: '独龙族' },
  { value: '赫哲族', label: '赫哲族' },
  { value: '珞巴族', label: '珞巴族' }
])

const formatDate=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formAdd.party_time = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  // 组合成所需的格式
  formAdd.party_time = `${year}-${month}-${day}`;
}
const formatDate1=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formAdd.entry_date = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  // 组合成所需的格式
  formAdd.entry_date = `${year}-${month}-${day}`;
}
const politicalOutlookOptions = ref([
  { value: '群众', label: '群众' },
  { value: '中共党员', label: '中共党员' },
  { value: '中共预备党员', label: '中共预备党员' },
  { value: '共青团员', label: '共青团员' },
  // 添加更多政治面貌选项...
])

const fullDegreeOptions = ref([
  { value: '学士', label: '学士' },
  { value: '硕士', label: '硕士' },
  { value: '博士', label: '博士' },
])
//////////////////编辑///////////////////////
const formEdit = reactive({...formAddData})
const tableEditHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  formEdit.id = rowData.id
  formEdit.name = rowData.name
  formEdit.number = rowData.number
  formEdit.identity = rowData.identity
  formEdit.birth = rowData.birth
  formEdit.compile=rowData.compile
  formEdit.role=rowData.role
  formEdit.jobtitle=rowData.jobtitle
  formEdit.department=rowData.department
  formEdit.employee=rowData.employee
  formEdit.grade=rowData.grade
  formEdit.duties=rowData.duties
  formEdit.marriage=rowData.marriage
  formEdit.sex=rowData.sex
  formEdit.education=rowData.education
  formEdit.titles=rowData.titles
  formEdit.birthplace=rowData.birthplace
  formEdit.nation=rowData.nation
  formEdit.party_time=rowData.party_time
  formEdit.entry_date=rowData.entry_date
  formEdit.political_outlook=rowData.political_outlook
  formEdit.education_type=rowData.education_type
  formEdit.fulltimedegree=rowData.fulltimedegree
  formEdit.fulldegree=rowData.fulldegree
  formEdit.fulltimeprofession=rowData.fulltimeprofession
  formEdit.phonenumber=rowData.phonenumber
  formEdit.status=rowData.status
  dialogEditState.value = true
}
const dialogEditState = ref(false)

const dialogEditOnSubmit = () => {
  request({
    url:'/information/updatepeople',
    method:'put',
    data:JSON.stringify(formEdit),
    headers:{'content-type' : "application/json;charset=UTF-8"}
  }).then(req=>{
    ElMessage({
      type:'info',
      message:req.data.msg
    })
    if (200==req.data.errorCode){
      getPeople();
    }
  })
  dialogEditState.value = false
}
const dialogEditOnReset = () => {
  Object.assign(formEdit , formAddData)
  dialogEditState.value = false
}


///////////////////删除/////////////////////////
const tableDeleteHandler = (rowIndex , rowData) => {
  ElMessageBox.confirm(
      '确认删除 : ' +rowData.name,
      'Warning',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {//点击了删除按钮
    request({
      method:'delete',
      url:'/information/del/'+rowData.id
    }).then(req=>{
      if (200==req.data.errorCode){
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        getPeople()
      }
    })
  })
      .catch(() => {//点击了取消按钮
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}

////////////////停用/启用///////////////
const tableDelHandler = (id) => {
  request({
    url: `/information/lock/${id}`, // 如果后端通过 URL 参数接收 ID
    method: 'put',
    // 如果后端期望 ID 在请求体中，可以这样设置
    data: JSON.stringify({...formEdit, id }),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(req => {
    ElMessage({
      type: 'info',
      message: req.data.msg
    });
    if (1 === req.data.errorCode) {
      getPeople();
    }
  });
  dialogEditState.value = false;
};
const tableAppHandler = (id) => {
  request({
    url: `/information/unlock/${id}`, // 如果后端通过 URL 参数接收 ID
    method: 'put',
    // 如果后端期望 ID 在请求体中，可以这样设置
    data: JSON.stringify({...formEdit, id }),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(req => {
    ElMessage({
      type: 'info',
      message: req.data.msg
    });
    if (1 === req.data.errorCode) {
      getPeople();
    }
  });
  dialogEditState.value = false;
};
</script>

<style scoped>
.page{
  margin-left: 40%;
}
.el-breadcrumb{
  font-size: 18px;
}
.break{
  margin: 5px 0 0 10px;
}
</style>